@import "../var";
@import "../mixin";
.booking-top {
  background: $clr-white;
  border-radius: px(4);
  padding: px(16);
  margin: px(12);
  .booking-tit {
    font-size: px(16);
  }
  .booking-info {
    margin-top: px(6);
  }
  .booking-serve {
    margin-top: px(6);
    color: $clr-g9;
    .gzl-flex__item {
      span {
        display: inline-block;
        &:not(:first-child) {
          position: relative;
          margin-left: px(16);
          &:before {
            content: '';
            position: absolute;
            height: px(12);
            border: 1px solid $clr-g9;
            left: px(-9);
            top: 0;
            bottom: 0;
            margin: auto;
            transform: scaleX(.5);
          }
        }
      &.cruiseSpan{
        margin-left: px(8);
        &:first-child{
          margin-left: 0;
        }
        &::before{
          content: none;
        }
      }
      }
    }
    .font-orange {
      .icon {
        font-size: px(10);
        vertical-align: middle;
      }
    }
  }
  .booking-date {
    margin-top: px(16);
    text-align: center;
    align-items: center;
    p {
      color: $clr-g9;
      font-size: px(12);
      margin-bottom: px(4);
    }
    div {
      font-size: px(20);
    }
    .days-num {
      line-height: px(20);
      background: $clr-bg;
      color: $clr-g9;
      border-radius: px(20);
      padding: 0 px(10);
    }
    .keep-days-num{
      position: relative;
      width: px(100);
      height: px(6);
      em{
        display: block;
        width: px(88);
        margin-left: px(6);
        margin-top: px(3);
        border-top: 1px dashed #999;
        transform: scaleY(.5);
      }
      i{
        font-size: px(10);
        color: #999;
        display: block;
        text-align: center;
        font-style: normal;
        margin-top: px(-16);
      }
      &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: px(6);
        height: px(6);
        box-sizing: border-box;
        border: px(1) solid #999;
        border-radius: 50%;
        display: block;
      }
      &::before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: px(6);
        height: px(6);
        box-sizing: border-box;
        border: px(1) solid #999;
        border-radius: 50%;
        display: block;
      }
    }
  }
}